<template>
    <div>
        <header>
            ×
        </header>
        <main>
            <div class="top">用户注册</div>
            <div class="mid">
                <input type="text" placeholder="手机/用户名" v-model="form.phone">
                <input type="text" password="密码" v-model="form.pass">
                <input type="text" password="确认密码" v-model="form.repass">
                <button @click="register">注册</button>
            </div>
            <div class="down">
                <span>去登录</span>
                <span>忘记密码</span>
            </div>
        </main>
        <div class="bottom">
            <input type="checkBox">
            <span>已阅读同意《用户服务协议》、《隐私政策》</span>
        </div>
    </div>
</template>

<script>
import { register_list } from '../api/index'
export default {
    data() {
        return {
            form: { phone: '', pass: '', repass: '' }
        }
    },
    mounted() {

    },
    methods: {
        register() {
            var reg = /^1[3-9]\d{9}$/;
            var regpass = /^[0-9]{4}$/;
            if (reg.test(this.form.phone) && regpass.test(this.form.pass) && this.form.pass == this.form.repass) {
                register_list({ phone: this.form.phone, pass: this.form.pass }).then((res) => {
                    console.log(res.data);
                })
                alert('注册成功！')
                this.$router.push('/login')
            } else {
                alert('请输入正确的手机号和密码!')
            }
            // console.log(this.form);
        }
    }
}
</script>

<style scoped>
header {
    height: 30px;
    width: 100%;
    font-weight: 700;
    font-size: 30px;
    /* background-color: rebeccapurple; */
    line-height: 15px;
    overflow: hidden;
    padding-left: 10px;
    box-sizing: border-box;
}

main {
    height: 450px;
    width: 100%;
    /* background-color: aqua; */
    margin-top: 60px;
    padding-left: 10px;
    box-sizing: border-box;
}

main .top {
    height: 50px;
    width: 100%;
    font-weight: 600;
    font-size: 24px;
}

.mid {
    height: 220px;
    width: 100%;
    margin-top: 20px;
    box-sizing: border-box;
}

.mid input {
    height: 40px;
    width: 95%;
    border: none;
    border-bottom: 1px solid gray;
    margin-top: 10px;
    outline: none;
}

.mid button {
    height: 35px;
    width: 95%;
    margin-top: 30px;
    border-radius: 12px;
    text-align: center;
    /* background-color: #a5a4a4; */
    border: none;
}

.down {
    height: 20px;
    display: flex;
    width: 100%;
    margin-top: 7px;
    /* background-color: blueviolet; */
}

.down span {
    font-size: 12px;
    color: lightblue;
}

.down span:nth-child(1) {
    margin-right: 250px;
}

.bottom input {
    margin-left: 10px;
    margin-top: 5px;
}

.bottom span {
    font-size: 12px;
}
</style>